<!--
  系统主布局组件
  创建时间：2025-09-11
  作者：开发团队
  目的：提供系统整体布局框架，包含顶部导航和侧边栏
-->

<template>
  <el-container class="layout-container">
    <!-- 顶部导航栏 -->
    <el-header class="layout-header">
      <div class="header-left">
        <el-button
          text
          class="sidebar-toggle"
          @click="toggleSidebar"
        >
          <el-icon size="20">
            <Menu v-if="!isCollapsed" />
            <Expand v-else />
          </el-icon>
        </el-button>
        <h1 class="system-title">新易访内网系统</h1>
      </div>
      
      <div class="header-right">
        <!-- 用户下拉菜单 -->
        <el-dropdown @command="handleUserMenuCommand">
          <div class="user-info">
            <el-avatar :size="32" class="user-avatar">
              <el-icon><UserFilled /></el-icon>
            </el-avatar>
            <span class="user-name">{{ authStore.userName }}</span>
            <el-icon><ArrowDown /></el-icon>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item disabled divided>
                <div class="user-detail">
                  <div>{{ authStore.user?.name }}</div>
                  <div class="user-role">{{ getRoleText(authStore.userRole) }}</div>
                  <div v-if="authStore.user?.phone" class="user-phone">
                    <el-icon><Phone /></el-icon>
                    {{ authStore.user.phone }}
                  </div>
                  <div v-if="authStore.user?.campus_name" class="user-campus">
                    管辖：{{ authStore.user.campus_name }}
                  </div>
                </div>
              </el-dropdown-item>
              
              <el-dropdown-item command="theme">
                <el-icon><Moon v-if="!themeStore.isDark" /><Sunny v-else /></el-icon>
                {{ themeStore.isDark ? '浅色模式' : '深色模式' }}
              </el-dropdown-item>
              
              <el-dropdown-item command="profile">
                <el-icon><Setting /></el-icon>
                个人设置
              </el-dropdown-item>
              
              <el-dropdown-item command="logout" divided>
                <el-icon><SwitchButton /></el-icon>
                退出登录
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </el-header>
    
    <el-container>
      <!-- 侧边栏 -->
      <el-aside :width="sidebarWidth" class="layout-sidebar">
        <slot name="sidebar"></slot>
      </el-aside>
      
      <!-- 主内容区 -->
      <el-main class="layout-main">
        <div class="main-content">
          <slot></slot>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { ElMessageBox } from 'element-plus'
import { showSuccess, showInfo } from '@/utils/message'
import {
  Menu,
  Expand,
  UserFilled,
  ArrowDown,
  Phone,
  Moon,
  Sunny,
  Setting,
  SwitchButton
} from '@element-plus/icons-vue'
import { useAuthStore } from '@/stores/auth'
import { useThemeStore } from '@/stores/theme'
import type { UserRole } from '@/types/common'

// Props定义
interface LayoutProps {
  user?: Record<string, unknown>
}

defineProps<LayoutProps>()

// 状态管理
const authStore = useAuthStore()
const themeStore = useThemeStore()

// 响应式状态
const isCollapsed = ref(false)

// 计算属性
const sidebarWidth = computed(() => 
  isCollapsed.value ? '64px' : '240px'
)

/**
 * 切换侧边栏展开/收缩
 */
const toggleSidebar = (): void => {
  isCollapsed.value = !isCollapsed.value
}

/**
 * 获取角色显示文本
 * :param role: 用户角色
 * :return: 角色显示名称
 */
const getRoleText = (role?: UserRole): string => {
  switch (role) {
    case 'guard':
      return '门卫'
    case 'admin':
      return '内网管理员'
    case 'superadmin':
      return '超级管理员'
    default:
      return '用户'
  }
}

/**
 * 处理用户菜单命令
 * :param command: 菜单命令
 */
const handleUserMenuCommand = async (command: string): Promise<void> => {
  switch (command) {
    case 'theme':
      themeStore.toggleTheme()
      showSuccess(`已切换到${themeStore.isDark ? '深色' : '浅色'}模式`)
      break
      
    case 'profile':
      // TODO: 打开个人设置对话框
      showInfo('个人设置功能开发中')
      break
      
    case 'logout':
      await handleLogout()
      break
  }
}

/**
 * 处理用户登出
 */
const handleLogout = async (): Promise<void> => {
  try {
    await ElMessageBox.confirm(
      '确认退出登录？',
      '提示',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    await authStore.logout()
      showSuccess('已退出登录')
  } catch {
    // 用户取消操作
  }
}
</script>

<style scoped>
.layout-container {
  height: 100vh;
}

.layout-header {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  background: var(--el-bg-color);
  border-bottom: 1px solid var(--el-border-color);
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
}

.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sidebar-toggle {
  padding: 8px;
  color: var(--el-text-color-primary);
}

.system-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--el-text-color-primary);
}

.header-right {
  display: flex;
  align-items: center;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.user-info:hover {
  background: var(--el-fill-color-light);
}

.user-avatar {
  background: var(--el-color-primary);
  color: white;
}

.user-name {
  font-size: 14px;
  color: var(--el-text-color-primary);
  font-weight: 500;
}

.user-detail {
  padding: 4px 0;
  text-align: left;
}

.user-role {
  font-size: 12px;
  color: var(--el-text-color-regular);
  margin-top: 2px;
}

.user-phone,
.user-campus {
  font-size: 11px;
  color: var(--el-text-color-secondary);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.layout-sidebar {
  background: var(--el-bg-color);
  border-right: 1px solid var(--el-border-color);
  transition: width 0.3s ease;
}

.layout-main {
  background: var(--el-bg-color-page);
  padding: 0;
}

.main-content {
  padding: 20px;
  min-height: calc(100vh - 60px);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .system-title {
    display: none;
  }
  
  .user-name {
    display: none;
  }
  
  .layout-sidebar {
    position: fixed;
    top: 60px;
    left: 0;
    bottom: 0;
    z-index: 1000;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }
  
  .layout-sidebar.show {
    transform: translateX(0);
  }
}
</style>"
